<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <parent-div></parent-div>
  </div>
  <!-- 子组件1 -->
  <template id="child1">
    <div style="background-color: burlywood;">
      <button @click="emit">组件1</button>
      {{child1Msg}}
    </div>
  </template>
  <!-- 子组件2 -->
  <template id="child2">
    <div style="background-color: bisque;">
      {{child2Msg}}
    </div>
  </template>
  <!-- 父组件 -->
  <template id="parent">
    <div style="width: 300px;height: 150px;background-color: azure;">
      {{parentMsg}}
      <child1></child1>
      <child2></child2>
    </div>
  </template>
  <script src="../vue.js"></script>
  <script>
    /* 
      属于同一个父组件下的兄弟组件之间的通信，可以借助一个vue实例的$emit来发送数据，通过vue实例上的$on来接收数据
    */
    //定义一个中间实例，用来监听子组件的事件
    const bus = new Vue();

    // 组件1
    const child1 = {
      template: '#child1',
      data() {
        return {
          child1Msg: '我是child1'
        }
      },
      methods: {
        emit(){
          //通过第三方实例来发送事件和数据
          bus.$emit('accept',this.child1Msg)
          console.log('发送成功');
        }
      }
    }
    // 组件2
    const child2 = {
      template: '#child2',
      data() {
        return {
          child2Msg: '我是child2'
        }
      },
      //声明周期钩子函数 --> 监听模板编译完成之后触发
      mounted() {
        //通过第三方实例来接收数据
        bus.$on('accept',param => {
          this.child2Msg = param
          console.log('chidl2接受成功');
        })
      }
    }
    const parent = {
      template: '#parent',
      data() {
        return {
          parentMsg: '我是父组件'
        }
      },
      components: {
        child1,
        child2
      }
    }
    Vue.component('ParentDiv', parent);
    

    const app = new Vue({
      el: '#app',
      data: {},
    })
  </script>
</body>

</html>